function loadImageWindow(strainKey) {
    if (strainKey == null) {
        strainKey = "";
    }
    var strainBox = new Ext.form.TextField({
        id: "strains4ImageId",
        fieldLabel: "Strains",
        value: strainKey,
        width: 400,
        allowBlank: false,
        listeners: {
            render: function(c) {
                Ext.QuickTips.register({
                    target: c,
                    title: '',
                    text: 'Required: YPG strain keys separated by space ie YPG 400 YPG 401 or 400 401'
                });
            }
        }
    });

    var groupCombo = {
        xtype: 'fieldset',
        title: 'Progeny Group',
        autoHeight: true,
        items: [strainBox,
            getImgGroupCombo()
        ]
    };
    var daysCBoxes = {
        xtype: 'fieldset',
        title: 'Days',
        autoHeight: true,
        defaultType: 'checkbox',
        items: [
            {
                fieldLabel: 'Days',
                boxLabel: 'All',
                checked: true,
                id: 'daysAllId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Day1',
                id: 'day1Id'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Day2',
                id: 'day2Id'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Day3',
                id: 'day3Id'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Day4',
                id: 'day4Id'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Day5',
                id: 'day5Id'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Day6',
                id: 'day6Id'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'Day7',
                id: 'day7Id'
            }
        ]
    };

    var conditionsBoxes = {
        xtype: 'fieldset',
        title: 'Conditions',
        autoHeight: true,
        defaultType: 'checkbox',
        items: [
            {
                fieldLabel: 'Conditions',
                boxLabel: 'All',
                checked: true,
                id: 'conditionsAllId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'CAF',
                id: 'cafId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'CHR',
                id: 'chrId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'COP',
                id: 'copId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'ERB',
                id: 'erbId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'ETH',
                id: 'ethId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'GLY',
                id: 'glyId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'HYG',
                id: 'hygId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'KAN',
                id: 'kanId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'NAT',
                id: 'natId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'RAP',
                id: 'rapId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'SHI',
                id: 'shiId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'SLO',
                id: 'sloId'
            },
            {
                fieldLabel: '',
                labelSeparator: '',
                boxLabel: 'YPD',
                id: 'ypdId'
            }
        ]
    };

    var imgForm = {
        layout:'column',
        items:[
            {
                columnWidth:.5,
                layout: 'form',
                items: [
                    daysCBoxes
                ]
            },
            {
                columnWidth:.5,
                layout: 'form',
                items: [conditionsBoxes
                ]
            }
        ]
    };

    var mybutton = {
        xtype: 'button',
        fieldAlign: 'center',
        text: '&nbsp;View Images&nbsp;',
        id: 'viewImageButtonId',
        listeners:{
            click:
                    function() {
                        var imageInputJson = {};
                        imageInputJson["ypgKeys"] = Ext.getCmp("strains4ImageId").getValue();
                        imageInputJson["imgGroup"] = Ext.getCmp("imgGroup").getValue();
                        imageInputJson["daysAllId"] = Ext.getCmp("daysAllId").getValue();
                        imageInputJson["day1Id"] = Ext.getCmp("day1Id").getValue();
                        imageInputJson["day2Id"] = Ext.getCmp("day2Id").getValue();
                        imageInputJson["day3Id"] = Ext.getCmp("day3Id").getValue();
                        imageInputJson["day4Id"] = Ext.getCmp("day4Id").getValue();
                        imageInputJson["day5Id"] = Ext.getCmp("day5Id").getValue();
                        imageInputJson["day6Id"] = Ext.getCmp("day6Id").getValue();
                        imageInputJson["day7Id"] = Ext.getCmp("day7Id").getValue();
                        imageInputJson["conditionsAllId"] = Ext.getCmp("conditionsAllId").getValue();
                        imageInputJson["cafId"] = Ext.getCmp("cafId").getValue();
                        imageInputJson["chrId"] = Ext.getCmp("chrId").getValue();
                        imageInputJson["copId"] = Ext.getCmp("copId").getValue();
                        imageInputJson["erbId"] = Ext.getCmp("erbId").getValue();
                        imageInputJson["ethId"] = Ext.getCmp("ethId").getValue();
                        imageInputJson["glyId"] = Ext.getCmp("glyId").getValue();
                        imageInputJson["hygId"] = Ext.getCmp("hygId").getValue();
                        imageInputJson["kanId"] = Ext.getCmp("kanId").getValue();
                        imageInputJson["natId"] = Ext.getCmp("natId").getValue();
                        imageInputJson["rapId"] = Ext.getCmp("rapId").getValue();
                        imageInputJson["shiId"] = Ext.getCmp("shiId").getValue();
                        imageInputJson["sloId"] = Ext.getCmp("sloId").getValue();
                        imageInputJson["ypdId"] = Ext.getCmp("ypdId").getValue();
                        loadSelectedImages(imageInputJson);
                    }
        }
    };

    loadtab(groupCombo, imgForm, mybutton);

    /*var ypgImageWin = new Ext.Window({
        title: 'Image Portal',
        width: 600,
        height: 600,
        modal: true,
        autoScroll: true,
        bodyStyle: 'padding:2px;',
        items: [
            groupCombo,
            imgForm,
            mybutton
        ],
        keys: [
            {
                key: [Ext.EventObject.ENTER],
                fn: function() {
                    Ext.ComponentMgr.get('viewImageButtonId').fireEvent('click');
                }
            }
        ],
        layout: 'fit'
    });
    ypgImageWin.show();
    */
    
}

function loadtab(groupCombo, imgForm, mybutton) {

    metaPanel.collapse();
    var imagePanel = Ext.ComponentMgr.get('imagePanelId');
    if (imagePanel == null) {
        Dudley.lims.samplemgr.getHousingPanel().add({
            title: 'Image Form',
            id: 'imagePanelId',
            width: 600,
            height: 600,
            iconCls: 'tabs',
            items: [
                groupCombo,
                imgForm,
                mybutton
            ],
            keys: [
                {
                    key: [Ext.EventObject.ENTER],
                    fn: function() {
                        Ext.ComponentMgr.get('viewImageButtonId').fireEvent('click');
                    }
                }
            ],
            closable:true,
            listeners: {
                activate: function(p) {
                    Ext.getDom("sample-search-result-list").innerHTML = "";
                    Ext.getDom("yo-form").innerHTML = "";
                }
            }
        }).show();
    } else {
        imagePanel.removeAll(true);
        Ext.getDom("sample-search-result-list").innerHTML = "";
        Ext.getDom("yo-form").innerHTML = "";
        imagePanel.add(groupCombo);
        imagePanel.add(imgForm);
        imagePanel.add(mybutton);
        Dudley.lims.samplemgr.getHousingPanel().activate(imagePanel);
    }
}

function getImageHtml(imageInputJson) {
    var imageHtmlJson = {};
    var allConditions = imageInputJson.conditionsAllId;
    var strainInput = imageInputJson.ypgKeys;
    var allDays = imageInputJson.daysAllId;
    var imgGroup = imageInputJson.imgGroup;

    var dayCellHtml = "";
    var daysArray = getImageDaysArray();
    var conditionsArray = getImageConditionsArray(imageInputJson);
    var imageHeaderHtml = "";

    imageHtmlJson["header"] = "<tr><th>Days/Group&nbsp;&nbsp;</th>";
    var imageCellAHtml = "";
    var imageCellBHtml = "";
    strainInput = strainInput.toUpperCase();
    var strains = [];
    var alpha = /[A-z]/g;
    //if YPG key is not entered, then parse and add
    var strainInputArray = strainInput.split(/ /g);
    if (strainInput.match(alpha) == null) {
        for (var s = 0; s < strainInputArray.length; s++) {
            strains[s] = "YPG" + strainInputArray[s];
        }
    } else {
        var dd = 0;
        //add in space for consistency
        if (strainInput.match(/YPG /g) == null) {
            strainInput = strainInput.replace(/YPG/, "YPG ");
        }
        strainInputArray = strainInput.split(/ /g);
        for (var ss = 1; ss < strainInputArray.length; ss = ss + 2) {
            strains[dd] = "YPG" + strainInputArray[ss];
            dd = dd + 1;
        }
    }

    for (var si = 0; si < strains.length; si++) {
        var key = strains[si];
        for (var d = 1; d <= daysArray.length; d++) {
            var col = "#060";
            if (d % 2 == 1) {
                col = "Red";
            }
            //check groups A/B/Both
            for (var i = 0; i < conditionsArray.length; i++) {
                if (conditionsArray[i] != false) {
                    var daySelection = "day" + d + "Id";
                    if (allDays || imageInputJson[daySelection]) {
                        imageCellAHtml = imageCellAHtml +
                                         "<td style=\"border:solid 2px " + col + "\"><img src=\"/yeastImage/colonyPages/" + key + "A/Day" + d + "/" + conditionsArray[i] + ".jpg\" onmouseover=\"popUp(event,'Day" + d + conditionsArray[i] + ".jpg')\" onmouseout=\"popUp(event,'Day" + d + conditionsArray[i] + ".jpg')\"/>" +
                                         "<div style=\"font-size:80%\" id=\"Day" + d + conditionsArray[i] + ".jpg\" class=\"tip\"><object data=\"/yeastImage/colonyPages/" + key + "A/Day" + d + "/" + conditionsArray[i] + ".html\" type=\"text/html\"/></div>";
                        imageCellBHtml = imageCellBHtml +
                                         "<td style=\"border:solid 2px " + col + "\"><img src=\"/yeastImage/colonyPages/" + key + "B/Day" + d + "/" + conditionsArray[i] + ".jpg\" onmouseover=\"popUp(event,'Day" + d + conditionsArray[i] + ".jpg')\" onmouseout=\"popUp(event,'Day" + d + conditionsArray[i] + ".jpg')\"/>" +
                                         "<div style=\"font-size:80%\" id=\"Day" + d + conditionsArray[i] + ".jpg\" class=\"tip\"><object data=\"/yeastImage/colonyPages/" + key + "B/Day/" + d + conditionsArray[i] + ".html\" type=\"text/html\"/></div>";
                    }
                }
            }
            //if groups A and B
            if (allDays || imageInputJson[daySelection]) {
                var pkey = key.replace(/YPG/, "YPG ");
                if (imgGroup == "Both") {
                    dayCellHtml = dayCellHtml + "<tr><td><font size='-1' color='blue'>" + pkey + "_" + d + "/A</font></td>" + imageCellAHtml + "</tr>";
                    dayCellHtml = dayCellHtml + "<tr><td><font size='-1' color='blue'>" + pkey + "_" + d + "/B</font></td>" + imageCellBHtml + "</tr>";
                } else if (imgGroup == "A") {
                    dayCellHtml = dayCellHtml + "<tr><td><font size='-1' color='blue'>" + pkey + "_" + d + "/A</font></td>" + imageCellAHtml + "</tr>";
                } else {
                    dayCellHtml = dayCellHtml + "<tr><td><font size='-1' color='blue'>" + pkey + "_" + d + "/B</font></td>" + imageCellBHtml + "</tr>";
                }
            }
            imageCellAHtml = "";
            imageCellBHtml = "";
        }
    }
    //build id, img src, mouseover/out functions and tool tip object data link
    for (var h = 0; h < conditionsArray.length; h++) {
        if (allConditions || conditionsArray[h]) {
            imageHeaderHtml = imageHeaderHtml + "<th><b><font size='-1' color='blue'>" + conditionsArray[h] + "</b></font></th>";
        }
    }
    imageHtmlJson["header"] = "<tr><th><b><font size='-1' color='blue'>Days/Group&nbsp;</b></font></th>" + imageHeaderHtml + "</tr>";
    imageHtmlJson["imageCells"] = dayCellHtml;
    return imageHtmlJson;
}
function loadSelectedImages(imageInputJson) {
    var imageHtmlJson = getImageHtml(imageInputJson);
    var header = imageHtmlJson.header;
    var imageCells = imageHtmlJson.imageCells;

    var imageDataHtml = "<b>Progeny Strain:" + imageInputJson["ypgKeys"] + "</b>"
            + "<table >"
            + header
            + imageCells
            + "</table>";

     var selectedImageWin = new Ext.Window({
     title: 'YPG Images',
     width: 900,
     height: 700,
     autoScroll: true,
     modal: true,
     bodyStyle: 'padding:2px;',
     html: imageDataHtml,
     layout: 'fit'
     });
     //selectedImageWin.show();

    Ext.getDom("sample-search-result-list").innerHTML = "";
    Ext.getDom("yo-form").innerHTML = "";

    var panel = new Ext.Panel({
                id:'main-panel',
                baseCls:'x-plain',
                //renderTo: Ext.getBody(),
                layout:'table',
                layoutConfig: {columns:3},
                // applied to child components
                defaults: {frame:true, width:200, height: 200},
                items:[{
                    title:'Item 1'
                },{
                    title:'Item 2'
                },{
                    title:'Item 3'
                },{
                    title:'Item 4',
                    width:410,
                    colspan:2
                },{
                    title:'Item 5'
                },{
                    title:'Item 6'
                },{
                    title:'Item 7',
                    width:410,
                    colspan:2
                },{
                    title:'Item 8'
                }]
    });

    Dudley.lims.samplemgr.getHousingPanel().add({
        title: 'Images',
        iconCls: 'tabs',
        width: 900,
        height: 650,
        html: imageDataHtml,
        //items: panel,
        layout: 'fit',
        autoScroll: true,
        closable:true
    }).show();

}

function getImgGroupCombo() {
    var imgGroupData = [
        ['1', 'A'],
        ['2', 'B'],
        ['3', 'Both']
    ];
    var imgGroupStore = new Ext.data.SimpleStore({
        fields: ['key', 'value'],
        data : imgGroupData
    });
    return new Ext.form.ComboBox({
        store: imgGroupStore,
        id: 'imgGroup',
        fieldLabel: 'Group',
        displayField:'value',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        value:'A',
        forceSelection:true,
        selectOnFocus:true
    });
}
